<template>
  <!--材料价格查询-->
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" class="small-search">
          <a-col :xl="6" :lg="8" :md="8" :sm="24" style="margin-bottom: -8px">
            <a-form-item label="课程" :wrapperCol="wrapperCol" :labelCol="labelCol">
              <a-select v-model="courseId" placeholder="请选择课程">
                <a-select-option v-for="(item, inx) in this.courseList" :key="inx" :value="item.id">
                  {{ item.courseName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="10" :lg="14" :md="16" :sm="24">
            <a-form-item label="所属日期">
              <a-date-picker
                placeholder="请选择开始日期"
                class="query-group-cust"
                value-format="yyyy-MM-dd"
                @change="onBirthdayChange"
              ></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden; margin: 2px 4px" class="table-page-search-submitButtons">
              <!-- <a-button type="primary" @click="handleExportXls30('PurchaseStatistics')">导出到excel</a-button> -->
              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <div id="myChart" style="height: 400px" class="MpriceImage-table"></div>
    </div>
    <div>
      <div id="myb" style="height: 400px" class="MpriceImage-table"></div>
    </div>
    <grand-list ref="modalForm" @ok="modalFormOk"> </grand-list>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction } from '@/api/manage'
import GrandList from './modules/GrandList'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
// 引入基本模板
import * as echarts from 'echarts/lib/echarts'
// // 引入基本模板
// let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')

require('echarts/lib/component/toolbox')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')

// Vue.prototype.$echarts = echarts //引入组件
import moment from 'moment'
export default {
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    GrandList,
  },
  data() {
    return {
      dateFormat: 'YYYY-MM-DD',
      examTime: '',
      courseId: '',
      description: '',
      courseList: [],
      maxScore: '',
      minScore: '',
      avgScore: '',
      barNames: [],
      value: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      modalWidth: 1000,
      // 表头
      columns: [],
      url: {
        courseURL: '/grand/course/list',
        list: '/grandForm/getClassContrast',
        getBarName: '/grand/grandBar/getBarName',
      },
      // xData:[],
      // seriesData1:[],
      // seriesData2:[],
      // seriesData3:[],
    }
  },
  created() {
    this.getCourseList()
    // this.echarts1()
  },

  computed: {},
  methods: {
    //开始时间
    onBirthdayChange(value, dateString) {
      this.examTime = dateString
    },

    getCourseList() {
      console.log('函数调用' + this.url.courseURL)
      getAction(this.url.courseURL).then((res) => {
        if (res.code == 200) {
          console.log('111' + res.result.records)
          this.courseList = res.result.records
        }
      })
    },
    //重置搜索
    searchReset() {
      this.queryParam = {}
      this.loadData1(1)
    },
    //搜索
    searchQuery() {
      if (this.courseId == '' || this.examTime == '') {
        console
        alert('请选择课程和考试时间！')
        return
      }

      this.loadData1(1)
    },
   
    echarts1(xData, seriesData1, seriesData2, seriesData3) {
      var app = {}

      var chartDom = document.getElementById('myChart')
      var myChart = echarts.init(chartDom)
      var option

      var posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight',
      ]

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right',
          },
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom',
          },
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos
            return map
          }, {}),
        },
        distance: {
          min: 0,
          max: 100,
        },
      }

      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance,
            },
          }
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          })
        },
      }

      var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {},
        },
      }

      option = {
        title: {
          text: '各班级成绩平均状况',
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          left: 'right',
          data: ['最大值', '最小值', '平均分'],
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '最大值',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series',
            },
            data: seriesData1,
          },
          {
            name: '最小值',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series',
            },
            data: seriesData2,
          },
          {
            name: '平均分',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series',
            },
            data: seriesData3,
          },
          // {
          //   name: 'Wetland',
          //   type: 'bar',
          //   label: labelOption,
          //   emphasis: {
          //     focus: 'series',
          //   },
          //   data: [98, 77, 101, 99, 40],
          // },
        ],
      }

      option && myChart.setOption(option)
    },

    echarts2(xData, scoreData1, scoreData2, scoreData3,scoreData4) {
     
      let barNames = []
      getAction(this.url.getBarName).then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            barNames.push(res.result[i])
          }
          console.log('区间名字：' + barNames)
          console.log('区间1名字：' + barNames[0])
          console.log('区间2名字：' + barNames[1])

          console.log(xData + scoreData1 + scoreData2 + scoreData3)
          var app = {}

          var chartDom = document.getElementById('myb')
          var myChart = echarts.init(chartDom)
          var option

          var posList = [
            'left',
            'right',
            'top',
            'bottom',
            'inside',
            'insideTop',
            'insideLeft',
            'insideRight',
            'insideBottom',
            'insideTopLeft',
            'insideTopRight',
            'insideBottomLeft',
            'insideBottomRight',
          ]

          app.configParameters = {
            rotate: {
              min: -90,
              max: 90,
            },
            align: {
              options: {
                left: 'left',
                center: 'center',
                right: 'right',
              },
            },
            verticalAlign: {
              options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom',
              },
            },
            position: {
              options: posList.reduce(function (map, pos) {
                map[pos] = pos
                return map
              }, {}),
            },
            distance: {
              min: 0,
              max: 100,
            },
          }

          app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
              var labelOption = {
                normal: {
                  rotate: app.config.rotate,
                  align: app.config.align,
                  verticalAlign: app.config.verticalAlign,
                  position: app.config.position,
                  distance: app.config.distance,
                },
              }
              myChart.setOption({
                series: [
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                ],
              })
            },
          }

          var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
              name: {},
            },
          }

          option = {
            title: {
              text: '各班级成绩区间人数分布',
              subtext: '',
              left: 'center',
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
            },
            legend: {
              left: 'right',
              // data: ['不及格','及格','良好','优秀'],
              data: barNames,
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['bar', 'stack', 'tiled'] },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            xAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: xData,
              },
            ],
            yAxis: [
              {
                type: 'value',
              },
            ],
            series: [
              {
                name: barNames[0],
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series',
                },
                data: scoreData1,
              },
              {
                name: barNames[1],
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series',
                },
                data: scoreData2,
              },
              {
                name: barNames[2],
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series',
                },
                data: scoreData4,
              },
              {
                name: barNames[3],
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series',
                },
                data: scoreData3,
              },
            ],
          }

          option && myChart.setOption(option)
        }
      })
    },
    loadData1() {
      getAction(this.url.list, {
        courseId: this.courseId,
        examTime: this.examTime,
      }).then((res) => {
        console.log(res.success)
        if (res.success) {
          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          let seriesData3 = []
          let scoreData1 = []
          let scoreData2 = []
          let scoreData3 = []
          let scoreData4=[]

          console.log('测试测试' + res.result.length)
          for (let i = 0; i < res.result.length; i++) {
            xData.push(res.result[i].className)
            seriesData1.push(res.result[i].maxScore)
            seriesData2.push(res.result[i].minScore)
            seriesData3.push(res.result[i].avgScore)
            scoreData1.push(res.result[i].ccount)
            scoreData2.push(res.result[i].bcount)
            scoreData3.push(res.result[i].acount)
            scoreData4.push(res.result[i].dcount)
          }
          console.log('111执行了' + xData + seriesData1 + seriesData2 + seriesData3.toString)
          this.echarts1(xData, seriesData1, seriesData2, seriesData3)
          this.echarts2(xData, scoreData1, scoreData2, scoreData3,scoreData4)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    initDictConfig() {},
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less" scoped>
//合计行样式
.date-totals {
  font-size: 17px;
  font-weight: 600;
  margin: 0 20px;
  margin-bottom: -4px;
  margin-top: 2px;
  span:not(:first-child) {
    margin-right: 20px;
  }
}
//搜索区域缩小
/deep/ .small-search {
  .ant-col .ant-form-item {
    margin-bottom: 6px;
  }
}
// /deep/ .ant-table-scroll .ant-table-fixed .ant-table-thead{
// position: relative;
// }
// /deep/ body{
//   ::-webkit-scrollbar {
//     position: absolute;
//     top: 0;
//     width: 8px;
//     height: 8px;
// }

// ::-webkit-scrollbar-corner {
//     background: #f82b2b;
// }
// ::-webkit-scrollbar-thumb {
//     background: #292828;
//     border-radius: 2px;
// }
// ::-webkit-scrollbar-track {
//     background: #f6f6f6;
//     border-radius: 2px;
// }
// }
</style>



